自我介紹

大學開始接觸 Web，研究所也陸續有在寫產學計畫的網頁，用過 XAMPP, Django, Vue, Sprint Boot, Express, React, Next.js，看著各種工具演進，開發體驗越來越好，對各路大神越發崇敬的同時，對 Web 的熱情也更加的洶湧彭湃。

正式開始工作後接觸到 Functional Programming (FP) 邪教，一開始覺得怪怪的「怎麼很多觀念都跟以前學的不一樣」，後來想說「大神說的肯定是對的，要不然還是試試看好了」，然後就像是被洗腦一樣漸漸無法自拔，到現在已經會想到處推廣了 ⁽⁽ ◟(∗ ˊωˋ ∗)◞ ⁾⁾

為甚麼要寫這系列文章 ?

FP一種設計思維，一種程式碼寫作風格。

學會 FP 的好處有很多，例如: 對功能的描述更精準、更方便進行測試、嚴謹的型別更容易做到及早發現錯誤，更好的控制 Side Effect ... 等。可惜的是包括我在內很多人一開始接觸都覺得 FP 寫法很怪，讓人看不懂、很難理解，稍微想用心研究一下就會撞到很多意義不明的專業術語，然後開始感到挫折、懷疑自己，最後放棄。

希望這一系列文章可幫對 FP 感興趣卻不得其門而入的人降低學習門檻，藉由專案實作讓大家參考一下 FP 都可以在哪些地方派上用場，也碰碰運氣看會不會有高手路過給我指導建議 XD

工具包

Effect-TS

Effect-TS 是一個幫助你在 typescript 實現 FP 的工具，在它之外還有 fp-ts, rambda ... 等。會選擇它的原因是它的文件相對比較好讀，感覺更有利於推廣。

接下來我會一邊實作專案一邊分享各種 Effect-TS 用法與 FP 體悟。

Next.js

Next.js 是一個基於 React 的框架。

值得注意的是由於 Nex.js 13 推出了新的 app router 架構，各種基於 pages router 的攻略文章會和最新的 Next.js 有所出入，因此如果要取得最新資訊還是建議參考 官方文件。

Tailwind

要快速做出好看的網頁肯定少不了 CSS 框架的支持。
Tailwind 和 Next.js 相容性很不錯，而且具有能高度客製化的特性。

Jotai

Jotai 是我很喜歡的狀態管理工具
相對原生 useState 能更方便做到跨元件的狀態變更
相對 Redux 這樣的狀態框架又更容易上手使用

對象

此系列文章適合以下讀者

• 熟悉 Typescript / CSS / HTML
• 懂得 Git 基本操作
• 對 Next.js 及 Functional Programming 感興趣

延伸閱讀

Functional Programming in JS系列
從零開始學習 Next.js 系列
Next.js documents
Effect-TS documents
使用JavaScript學習函式編程 — Anjana Vakil — JSUnconf